<template>
	<view class="page text-28">
		<navbar :leftText="'AI诊断'" :leftIcon="true" :backStatus="true"></navbar>
		<view class="text-white" style="background-color: #11102A;">
			<view class=" zhenDevice">
				<view class="w690 flex-between">
					<view>
						<view class="text-28 deviceName flex-start">
							<text style="margin-right: 20rpx;">t-陕西西安-34934-antd47</text>
							<view class="flex-start">
								<view class="onlineIcon"></view>
								<view class="text-green">在线</view>
							</view>


						</view>
						<view class="flex-start">
							<view class="text-28 text-red totalShou">总收益:</view>
							<view class="text-36 text-weight text-red">0</view>
						</view>
					</view>
					<view class="resertJianCe flex-center">
						重新检测
					</view>
				</view>
			</view>

			<view class="onlineItem ">
				<view class="onlineTitle w690">在线情况</view>
				<view class="flex-between w690">
					<view class="onlineBg flex-between">
						<view>今日在线时长:</view>
						<view>4.37h</view>
					</view>
					<view class="onlineBg flex-between">
						<view>今日晚高峰在线时长:</view>
						<view>4.37h</view>
					</view>
					<view class="onlineBg flex-between">
						<view>昨日在线时长:</view>
						<view class="text-red">4.37h</view>
					</view>
					<view class="onlineBg flex-between">
						<view>昨日晚高峰在线时长:</view>
						<view class="text-red">4.37h</view>
					</view>
				</view>
				<view class="w690 text-red yiChangTips">
					异常:机器长久运行才能有更好的收益，昨日晚高峰在线时间短将极大降低收益。
				</view>
			</view>

			<view class="onlineItem ">
				<view class="w690 flex-start onlineTitle">
					<view class="">
						NAT类型
					</view>
					<view style="font-size:14rpx !important;margin-left:20rpx;">NATO>NAT1>NAT2>NAT3>NAT4</view>
				</view>
				<view class="flex-between w690">
					<view class="onlineBg flex-between">
						<view>今日在线时长:</view>
						<view>4.37h</view>
					</view>
					<view class="onlineBg flex-between">
						<view>今日晚高峰在线时长:</view>
						<view>4.37h</view>
					</view>
					<view class="onlineBg flex-between">
						<view>昨日在线时长:</view>
						<view class="text-red">4.37h</view>
					</view>
					<view class="onlineBg flex-between">
						<view>昨日晚高峰在线时长:</view>
						<view class="text-red">4.37h</view>
					</view>
				</view>
				<view class="w690 text-red yiChangTips">
					异常:机器长久运行才能有更好的收益，昨日晚高峰在线时间短将极大降低收益。
				</view>
			</view>


			<view class="onlineItem ">
				<view class="w690">
					<view class="onlineTitle">真实网络带宽:</view>
					<view class="flex-between">
						<view class="shiItem">
							<view>线路条数:</view>
							<view @click="checkNetwork" class="text-green flex-end">网络信息</view>
						</view>
						<view class="shiItem">
							<view>丢包压测满意度:</view>
							<view class="text-green flex-end">76.7%</view>
						</view>
					</view>
					<view class="shiNetwork text-blue">
						提示:您的带宽丢包压测满意度低，带宽压测无法达到预期，请改善网络，降低其他设备对带宽的占用。
					</view>
				</view>
			</view>

			<view class="onlineItem ">
				<view class="w690 flex-start onlineTitle">
					<view class="">
						晚高峰常觉质重
					</view>
					<view style="font-size:14rpx !important;margin-left:20rpx;">NATO>NAT1>NAT2>NAT3>NAT4</view>
				</view>
				<view class="flex-between w690">
					<view class="onlineBg flex-between">
						<view>丢包率:</view>
						<view>12.3%</view>
					</view>
					<view class="onlineBg flex-between">
						<view>重传率:</view>
						<view>0.2%</view>
					</view>
					<view class="onlineBg flex-between">
						<view>时延</view>
						<view class="text-red">19.3ms</view>
					</view>
				</view>
				<view class="w690 text-red yiChangTips">
					异常:2您的设备丢包率过高
				</view>
			</view>



			<view class="yingItem">
				<view class="w690">
					<view class="onlineTitle">硬件配置:</view>
					<view class="flex-between">
						<view class="yingTong" style="width:48%;">
							<view>CPU</view>
							<view class="flex-center">
								<l-circularProgress :isBgShow="true" :lineWidth="10" boxWidth="100" boxHeight="100"
									progressColor="#ff7900" fontColor="#5677fc" gradualColor="#5677fc"
									:percent="60"></l-circularProgress>
							</view>

						</view>

					</view>
					<view class="shiNetwork text-blue">
						提示:您当前的建设带宽为55.3M,我们建议您最好使用4核CPU和4G内存及以上配置，以使您的收益最大。
					</view>


				</view>

			</view>
		</view>

		<!-- <view class="flex-start">
			<view class="offlineIcon"></view>
			<view class="text-red">离线</view>
		</view> -->
	</view>
</template>

<script setup>
	import * as api from "@/utils/api.js"
	import {
		ref,
		reactive,
		onMounted,
		inject
	} from 'vue';
	// 查看网络信息
	const checkNetwork = () => {
		uni.navigateTo({
			url: "/pagesA/device/deviceChild/dialingOnline"
		})
	}
	onMounted(() => {
		// 全局变量引入
		const globalData = inject('globalData');
		imageUrl.value = globalData.value.imgOssUrl;
	})
</script>

<style scoped>
	.yingItem {
		margin-top: 20rpx;
	}

	.yingTong {
		padding: 20rpx;
		box-shadow: inset 0rpx 0rpx 32rpx 14rpx rgba(43, 23, 147, 0.59);
		border-radius: 8rpx;
		box-sizing: border-box;
	}

	.shiItem {
		width: 42%;
		padding: 20rpx;
		box-shadow: inset 0rpx 0rpx 32rpx 14rpx rgba(43, 23, 147, 0.59);
		border-radius: 8rpx;
	}

	.shiNetwork {
		margin: 20rpx 0;
	}

	.yiChangTips {
		padding: 20rpx;
		/* box-shadow: inset 0rpx 0rpx 32rpx 14rpx rgba(43, 23, 147, 0.59);
		border-radius: 8rpx;
		box-sizing: border-box; */

	}

	.onlineTitle {
		margin-bottom: 20rpx;
	}

	.onlineItem {
		margin-top: 20rpx;
		border-bottom: 2rpx solid #1F1757;
	}

	.onlineBg {
		width: 42%;
		padding: 20rpx;
		box-shadow: inset 0rpx 0rpx 32rpx 14rpx rgba(43, 23, 147, 0.59);
		border-radius: 8rpx;
		margin-bottom: 20rpx;
	}

	.onlineIcon {
		width: 14rpx;
		height: 14rpx;
		background-color: #0BFFDA;
		border-radius: 50%;
		margin-right: 5rpx;
	}

	.offlineIcon {
		width: 14rpx;
		height: 14rpx;
		background-color: #d81e06;
		border-radius: 50%;
		margin-right: 5rpx;
	}

	.resertJianCe {
		background-color: #291E6F;
		width: 150rpx;
		height: 60rpx;
		border-radius: 10rpx;
	}

	.totalShou {
		margin-right: 10rpx;
	}

	.zhenDevice {
		border-bottom: 2rpx solid #1F1757;
		padding-bottom: 20rpx;
		box-sizing: border-box;
	}
</style>